<template>
  <div>

    <!-- 头部搜索 -->
    <div class="tousuo fle">
        <div class="fle jus">
            <div>北京市</div>
            <div class="jus">
                <van-icon name="arrow-down" />
            </div>
        </div>
        <div @click="dian">
            <van-search
            v-model="value"
            shape="round"
            background="#FFFFFF"
            placeholder="请输入搜索关键词"
            />
        </div>
        <div class=" er jus">
            <van-icon size="25px" name="scan" />
        </div>
    </div>
    <!-- 头部搜索 -->


    <!-- 轮播图区域 -->
    <div class="lun">
        <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in lunlist" :key="index">
            <!-- <img v-lazy="image" /> -->
            <img :src="image.image_src" alt="" width="348px" height="156px" >
        </van-swipe-item>
        </van-swipe>
    </div>
    <!-- 轮播图区域 -->


    <!-- 楼层区域 -->
    <!-- <div class="lou">
        <div  v-for="(item,index) in loulist " :key="index">
            <img  :src="item.image_src" alt="" class="loutu" >
        </div>
    </div> -->


    <div class="louceng">
        <div @click="lout1">
            <img src="../../../assets/tcp1.png" alt="" width="59px" height="70px">
        </div>

        <div @click="lout2">
            <img src="../../../assets/tcp2.png" alt="" width="59px" height="70px">
        </div>

        <div @click="lout3">
            <img src="../../../assets/tcp3.png" alt="" width="59px" height="70px">
        </div>

        <div>
            <img src="../../../assets/tcp4.png" alt="" width="59px" height="70px">
        </div>
    </div>
    <!-- 楼层区域 -->


    <!-- 图片区域 -->
    <div class="tupianyu">
        <div class="tupian">
            <div class="tuzuo">
            <img src="../../../assets/left1.png" alt="" width="166px" height="82px" >
            <img src="../../../assets/left2.png" alt="" width="166px" height="82px">
            </div>

            <div>
                <img src="../../../assets/right.png" alt="" width="166px" height="170px">
            </div>
        </div>
    </div>
    <!-- 图片区域 -->


    <!-- 文字区域 -->
    <div>
        <div class="lun">
            <div class="tong">
                <h3>新闻咨询</h3>
                <h5>更多></h5>
            </div>


            <div>
                <div class="tong">
                    <h6 class="bor">资讯</h6>
                    <h5>全国新型冠状肺炎最近情况</h5>
                </div>
                <div class="bde">
                    2020年2月11日，世界卫生组织总干事谭德塞在瑞士日内瓦宣布，将新型冠状病毒感染的肺
                    炎命名为“COVID-19”。2月22日，国家卫生健康委发布通知，“新型冠状病毒肺炎”英文名称
                    修订为“COVID-19”。3月11日，世卫组织认为当前新冠肺炎疫情可被称为全球大流行 [6]  。
                    4月4日，中国举行全国性哀悼活动 
                </div>


                <div class="tong">
                    <h6 class="bor">资讯</h6>
                    <h5>全国新型冠状肺炎最近情况</h5>
                </div>
                <div class="bde">
                    2020年2月11日，世界卫生组织总干事谭德塞在瑞士日内瓦宣布，将新型冠状病毒感染的肺
                    炎命名为“COVID-19”。2月22日，国家卫生健康委发布通知，“新型冠状病毒肺炎”英文名称
                    修订为“COVID-19”。3月11日，世卫组织认为当前新冠肺炎疫情可被称为全球大流行 [6]  。
                    4月4日，中国举行全国性哀悼活动 
                </div>


                <div class="tong">
                    <h6 class="bor">资讯</h6>
                    <h5>全国新型冠状肺炎最近情况</h5>
                </div>
                <div class="bde">
                    2020年2月11日，世界卫生组织总干事谭德塞在瑞士日内瓦宣布，将新型冠状病毒感染的肺
                    炎命名为“COVID-19”。2月22日，国家卫生健康委发布通知，“新型冠状病毒肺炎”英文名称
                    修订为“COVID-19”。3月11日，世卫组织认为当前新冠肺炎疫情可被称为全球大流行 [6]  。
                    4月4日，中国举行全国性哀悼活动 
                </div>
            </div>
        </div>
    </div>
    <!-- 文字区域 -->

  </div>
</template>

<script>
import * as api from '../../../api/home'
export default {

    created(){
        this.getlun(),
        this.getlou()
    },

    data(){
        return{
            lunlist:[],
            loulist:[],
            active: 'home',
            value:''
        }
    },

    methods:{
        // 获取轮播图数据
       async getlun(){
            let res = await api.lucn()
            // console.log('res---',res)
            this.lunlist = res.data.message

        },

        // 获取楼层请求
        async getlou(){
            let res = await api.lou()
            console.log('lou--',res)
            this.loulist = res.data.message

        },

        // 点击跳转搜索页面
        tiaosou(){
            this.$router.push('sou')
        },



        lout1(){
            this.$router.push('ybbk')
        },
        lout2(){
            this.$router.push('fysc')
        },
        lout3(){
            this.$router.push('fyzs')
        },

        dian(){
            this.$router.push('sou')
        }
    }

}
</script>

<style lang="less" scoped>
.lun{
    width: 348px;
    height: 156px;
    // background-color: red;
    margin: auto;
    margin-top: 20px;
}
.lou{
    width: 348px;
    height: 80px;
    // background-color: red;
    display: flex;
        justify-content: space-around;
    margin: auto;
    margin: 20px auto;

}
.loutu{
    width: 59px;
    height: 74px;
    }

    .tupian{
        display: flex;
    }
    .tuzuo{
        width: 170px;
    }
    .tupianyu{
        width: 350px;
        height: 170px;
        margin: auto;
    }

    .tong{
        display: flex;
        justify-content: space-between;
        // background-color: red;
    }

    .bor{
        width: 40px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 8px;
        color: white;
        background-color: red;
        border-radius: 5px 5px 5px 5px;
        }

    .tousuo{
        width: 350px;
        height: 40px;
        margin: auto;
        // background-color: red;
    }

    .fle{
        display: flex;
    }

    .jus{
        justify-content: center;
        align-items: center;
    }

    .er{
        width: 50px;
        height: 40px;
        text-align: center;
        line-height: 50px;
    }

    .louceng{
        width: 350px;
        height: 90px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .loutic{
            width: 59px;
            height: 74px;
        }
    }

    .bde{
        color: #D5D5D5;
        border-bottom: 1px solid #F4F4F4;
        font-size: 12px;
    }


</style>